<template>
    <el-row>
      <el-col :span="12">
          <div class="block">
              <span class="demonstration">业务类型</span>
              <el-cascader
                style="width:300px"
                expand-trigger="hover"
                :options="options"
                v-model="selectedOptions"
                @change="handleChange">
              </el-cascader>
            </div>
      </el-col>
      <!-- action="http://127.0.0.1:8000/showinv/uploadvue/" -->
      <el-col :span="12">
            <el-upload
              class="upload-demo"
              :data="dataObj"
              action="http://10.24.0.77:8000/showinv/uploadvue/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-change="handlefileChange"
              :on-success="handleuploadsucc"
              :before-remove="beforeRemove"
              :before-upload ="beforeuploadcheck"
              multiple
              :limit="limitfile"
              :on-exceed="handleExceed"
              :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
      </el-col>
    </el-row>
    
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      ret : false,
      dataObj: { entryid: "", key: "" },
      selectedOptions: [],
      limitfile: 2000,
      options: [
        {
          value: "2",
          label: "福州鹭燕医药有限公司",
          children: [
            {
              value: "sa",
              label: "销售发票",
            },
            {
              value: "su",
              label: "进货发票",
            },
            {
              value: "list",
              label: "清单",
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 ${this.limitfile} 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleChange(value) {
      this.dataObj.entryid = value[0];
      this.dataObj.key = value[1]
    },
    handlefileChange(file, fileList) {
      this.fileList = fileList.slice(-10);
    },
    handleuploadsucc(response, file, fileList) {
      this.$message({
          // message: `共上传了 ${fileList.length} 个文件`,
          message: `上传文件完成`,
          type: 'success'
        });
    },
    beforeuploadcheck(file) {
        this.dataObj.entryid === '' ? this.ret = false: this.ret = true
        if (!this.ret) {
          this.$message.error('要先选上传内容!');
        }
        return this.ret
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
